<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>案例</title>
    <div th:include="components/header :: header"></div>
</head>
<body>

<div class="case-nav">
    <div th:include="components/nav :: nav"></div>
</div>

<div class="submenu menuIn">
    <div class="container subbox">
        <h1 class="font-base">
            CASE
        </h1>
        <div id="case-hd" class="sub-sort">
            <button class="cateItem active" onclick="show('all')" data-classify="all">全部</button>
            <button class="cateItem" onclick="show(1)" data-classify="brand">品牌策划</button>
            <button class="cateItem" onclick="show(2)" data-classify="ui">品牌设计</button>
            <button class="cateItem" onclick="show(3)" data-classify="ui">营销方案</button>
            <button class="cateItem" onclick="show(4)" data-classify="ui">线下沙龙</button>
            <button class="cateItem" onclick="show(5)" data-classify="ui">商学院</button>
        </div>
    </div>
</div>

<div id="case">
    <div th:each="item :${list}" class="item" th:attr="type=${item.type}">
        <a th:href="'/case/'+${item.lowerCase}+'.html'">
            <div class="x1 block" th:attr="size=${item.size}"
                 th:style="'background-image:url(' + ${item.imagePath} + ');'">
                <img class="" th:src="${item.imagePath}" alt="">
            </div>
            <div class="ani-border">
                <div class="dire top"></div>
                <div class="dire left"></div>
                <div class="dire bottom"></div>
                <div class="dire right"></div>
                <!--<span th:text="${item.name}"></span>-->
            </div>

        </a>
    </div>
</div>

<div th:replace="components/footer :: footer"></div>

<script src="/static/js/freewall.js"></script>
<script src="/static/js/muuri.min.js"></script>
<script>
    $(".nav-items > li > .wrap").eq(2).css({"top": "-26px", "font-weight": "600"})
    var grid, items
    $(function () {
        var containerWidth = $("#case").width()
        containerWidth = Math.ceil(containerWidth) - Math.ceil(containerWidth) % 3
        $("#case").width(containerWidth)


        var width = $(window).width()
        if (width < 769) {
            $("[size=1]").css({"width": containerWidth + 'px', "padding-bottom": '100%'})
            $("[size=2]").css({"width": containerWidth + 'px', "padding-bottom": '50%'})
            $("[size=3]").css({"width": containerWidth + 'px', "padding-bottom": '50%'})
        } else {
            $("[size=1]").css({"width": (containerWidth / 3) + 'px', "padding-bottom": '100%'})
            $("[size=2]").css({"width": (containerWidth / 3) + 'px', "padding-bottom": '50%'})
            $("[size=3]").css({"width": (containerWidth / 3 * 2) + 'px', "padding-bottom": '25%'})
        }


        grid = new Muuri('#case', {
            layout: {
                fillGaps: true,
                alignLeft: true,
                alignTop: true,
            }
        });


        items = grid.getItems()
    });

    function show(cmd) {
        if (cmd == 'all') {
            $(".cateItem").removeClass("active")
            $(".cateItem").eq(0).addClass("active")
            grid.show(items);
            return
        }
        $(".cateItem").removeClass("active")
        $(".cateItem").eq(cmd).addClass("active")
        // cmd = parseInt(cmd)
        var showItems = []
        var hideItems = []
        for (var i in items) {
            if (items[i]._element.attributes.type.value == cmd) {
                showItems.push(items[i])
            } else {
                hideItems.push(items[i])
            }
        }

        grid.show(showItems)
        grid.hide(hideItems)
    }
</script>
</body>
</html>
